////
/// @group badge
////

@use "sass:map";
@use "../utils";
@use "../border-radius";
@use "../theme/a11y";
@use "../theme/colors";
@use "../theme/theme";
@use "../typography/typography";

/// Set to `true` to disable all the styles
/// @type Boolean
$disable-everything: false !default;

/// Set to `true` to disable the styles for the greyscale theme only
/// @type Boolean
$disable-greyscale-theme: false !default;

/// Set to `true` to disable the styles for the primary theme only
/// @type Boolean
$disable-primary-theme: false !default;

/// Set to `true` to disable the styles for the secondary theme only
/// @type Boolean
$disable-secondary-theme: false !default;

/// The default height and width
/// @type Number
$size: 1.5rem !default;

/// The default font size which is merged into the `$typography` map.
/// @type Number
$font-size: 0.625rem !default;

/// The default `top` and `right` offset applied to badges that are positioned
/// absolutely in a relative container.
///
/// The styles are setup like:
///
/// ```scss
/// top: var(--rmd-badge-offset-top, var(--rmd-badge-offset))
/// right: var(--rmd-badge-offset-right, var(--rmd-badge-offset))
/// ```
///
/// @type Number
$offset: 0 !default;

/// An optional `top` offset override. When this is `null` or equal to the
/// `offset`, it will not be set and fallback to the `offset`
/// instead.
/// @type Number
$offset-top: $offset !default;

/// An optional `right` offset override. When this is `null` or equal to the
/// `offset`, it will not be set and fallback to the `offset`
/// instead.
/// @type Number
$offset-right: $offset !default;

/// The default border radius
/// @type Number
$border-radius: border-radius.get-var(full) !default;

/// The default typography to use
/// @type Map
$typography: map.merge(
  map.remove(typography.$body-1-styles, line-height, font-size),
  (
    font-size: $font-size,
  )
) !default;

/// The background color for the greyscale theme when using the global light
/// theme
/// @type Color
$light-theme-greyscale-background-color: #ccc !default;

/// The text color for the greyscale theme when using the global light theme
/// @type Color
$light-theme-greyscale-color: a11y.contrast-color(
  $light-theme-greyscale-background-color
) !default;

/// The background color for the greyscale theme when using the global dark theme
/// @type Color
$dark-theme-greyscale-background-color: colors.$grey-700 !default;

/// The text color for the greyscale theme when using the global dark theme
/// @type Color
$dark-theme-greyscale-color: a11y.contrast-color(
  $dark-theme-greyscale-background-color
) !default;

/// The default greyscale background color
/// @type Color
$greyscale-background-color: theme.get-default-color(
  $light-theme-greyscale-background-color,
  $dark-theme-greyscale-background-color
) !default;

/// The default greyscale text color
/// @type Color
$greyscale-color: theme.get-default-color(
  $light-theme-greyscale-color,
  $dark-theme-greyscale-color
) !default;

/// The available configurable css variables and mostly used internally for the
/// `get-var`, `set-var`, and `use-var` utils.
/// @type List
$variables: (
  border-radius,
  greyscale-background-color,
  greyscale-color,
  size,
  offset,
  offset-top,
  offset-right
);

/// @param {String} name - The supported variable name
/// @param {any} fallback [null] - An optional fallback value
/// @returns {String} a `var()` statement
@function get-var($name, $fallback: null) {
  $var: utils.get-var-name($variables, $name, "badge");
  @if $fallback {
    @return var(#{$var}, #{$fallback});
  }

  @return var(#{$var});
}

/// @param {String} name - The supported variable name
/// @param {any} value - The value to set the variable to. Supports `null` which
/// will just be a no-op.
@mixin set-var($name, $value) {
  @if $value {
    #{utils.get-var-name($variables, $name, "badge")}: #{$value};
  }
}

/// @param {String} property - The css property to apply the variable to
/// @param {String} name [$property] - The supported variable name
/// @param {any} fallback [null] - An optional fallback value if the variable
/// has not been set
@mixin use-var($property, $name: $property, $fallback: null) {
  @if not $fallback {
    @if $name == border-radius {
      $fallback: $border-radius;
    }
  }

  #{$property}: get-var($name, $fallback);
}

/// Applies the light the variables based on feature flags
@mixin use-light-theme {
  @if not $disable-everything {
    @if $light-theme-greyscale-background-color !=
      $dark-theme-greyscale-background-color
    {
      @include set-var(
        greyscale-background-color,
        $light-theme-greyscale-background-color
      );
    }
    @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
      @include set-var(greyscale-color, $light-theme-greyscale-color);
    }
  }
}

/// Applies the dark the variables based on feature flags
@mixin use-dark-theme {
  @if not $disable-everything {
    @if $light-theme-greyscale-background-color !=
      $dark-theme-greyscale-background-color
    {
      @include set-var(
        greyscale-background-color,
        $dark-theme-greyscale-background-color
      );
    }

    @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
      @include set-var(greyscale-color, $dark-theme-greyscale-color);
    }
  }
}

/// Conditionally applies the css variables based on feature flags
@mixin variables {
  @if not $disable-everything {
    @include set-var(greyscale-background-color, $greyscale-background-color);
    @include set-var(greyscale-color, $greyscale-color);
    @include set-var(size, $size);
    @include set-var(offset, $offset);
    @if $offset != $offset-top and $offset-top {
      @include set-var(offset-top, $offset-top);
    }
    @if $offset != $offset-right and $offset-right {
      @include set-var(offset-right, $offset-right);
    }
  }
}

/// Generates all the styles based on feature flags.
///
/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
/// layer behavior
@mixin styles($disable-layer: false) {
  @if not $disable-everything {
    @include utils.optional-layer(badge, $disable-layer) {
      .rmd-badge {
        @include utils.map-to-styles($typography);
        @include use-var(border-radius);
        @include use-var(height, size);
        @include use-var(width, size);
        @include use-var(top, offset-top, get-var(offset));

        align-items: center;
        display: inline-flex;
        justify-content: center;
        pointer-events: none; // badges are _kind_ of presentational and shouldn't trigger mouse events
        position: absolute;
        right: get-var(offset-right, get-var(offset));

        @if not $disable-greyscale-theme {
          &--greyscale {
            @include use-var(background-color, greyscale-background-color);
            @include use-var(color, greyscale-color);
          }
        }

        @include utils.rtl {
          left: get-var(offset-right, get-var(offset));
          right: auto;
        }
      }
    }
  }
}
